<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link href="bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .body{width:600px;margin:100px auto;text-align:center;}
        #main{height:300px;border:6px solid #000000;position:relative;  background-color: #007fff;
        border-radius: 8px;}
        #main div{width:20px;
            height:20px;
            background-color: #fff2b9;
            position:absolute;
            border: solid 3px #000000;
            border-radius: 50%;
        }
        #main div.snake{background-color:#ff0;
            border: solid 3px #000000;
            border-radius: 0px;
        }
        .score{font-size:14px;}
        .score strong{}
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var omain = document.getElementById("main");
            var r = 15, c = 30;
            var asnake = [];
            var speed = 150;
            var odiv = document.createElement("div");
            asnake.push({ l: Math.floor(Math.random() * c), t: Math.floor(Math.random() * r), div: odiv, d: "l" });
            omain.appendChild(odiv);
            setPosition(asnake[0]);
            //设置位置
            function setPosition(obj) {
                obj.div.style.left = obj.l * 20 + "px";
                obj.div.style.top = obj.t * 20 + "px";
            }
            var aEat = null;
            var d = "l";
            //创建吃的
            function createEat() {
                var l = Math.floor(Math.random() * c);
                var t = Math.floor(Math.random() * r);
                var isexist = false;
                //判断是否存在在设数组里面
                for (var i = 0; i < asnake.length; i++) {
                    if (l == asnake[i].l && t == asnake[i].t) {
                        isexist = true;
                        break;
                    }
                }
                //如果存在再创建一个蛇
                if (isexist) {
                    createEat();
                    return;
                }
                var onewdiv = document.createElement("div");
                onewdiv.className = "snake";
                aEat = { l: l, t: t, div: onewdiv, d: "l" };
                omain.appendChild(onewdiv);
                setPosition(aEat);
            }
            createEat();

            var obtn = document.getElementById("btn");
            var oscore = document.getElementById("score");
            var oaddspeed = document.getElementById("addspeed");

            var otimer = null;
            var isitem = true;
            oaddspeed.onclick = function () {
                clearInterval(otimer);
                speed = speed < 50 ? 50 : speed - 20;
                setasnke();
            }
            obtn.onclick = function () {
                if (!isitem) {
                    clearInterval(otimer);
                    obtn.innerHTML = "继续游戏";
                    isitem = true;
                    return false;
                }
                obtn.innerHTML = "暂停游戏";
                setasnke();
                isitem = false;
            }

            function setasnke() {

                otimer = setInterval(function () {
                    for (var i = asnake.length - 1; i > 0; i--) {
                        asnake[i].l = asnake[i - 1].l;
                        asnake[i].t = asnake[i - 1].t;
                        asnake[i].d = asnake[i - 1].d;
                    }
                    switch (d) {
                        case "l":
                            asnake[0].l--;
                            break;
                        case "r":
                            asnake[0].l++;
                            break;
                        case "t":
                            asnake[0].t--;
                            break;
                        case "b":
                            asnake[0].t++;
                            break;
                    }
                    //判断蛇是否撞墙了
                    if (asnake[0].l < 0 || asnake[0].l >= c || asnake[0].t < 0 || asnake[0].t >= r) {
                        alert("你死掉了");
                        clearInterval(otimer);
                        return;
                    }
                    //判断蛇是否撞到自己了
                    for (var n = 1; n < asnake.length; n++) {
                        if (asnake[0].l == asnake[n].l && asnake[0].t == asnake[n].t) {
                            alert("你已经死掉了");
                            clearInterval(otimer);
                            return;
                        }
                    }
                    //判断蛇是否吃到东西了
                    if (asnake[0].l == aEat.l && asnake[0].t == aEat.t) {
                        aEat.div.className = "";
                        oscore.innerHTML = parseInt(oscore.innerHTML) + 1;
                        asnake.push(aEat);
                        createEat();
                    }
                    //重新设置蛇的位置
                    for (var j = 0; j < asnake.length; j++) {
                        setPosition(asnake[j]);
                    }
                }, speed);
            }

            //键盘改变蛇的方向
            document.onkeydown = function (event) {
                var oEn = event || window.event;
                var oCode = oEn.keyCode;
                switch (oCode) {
                    case 37:
                        d = "l";
                        break;
                    case 38:
                        d = "t";
                        break;
                    case 39:
                        d = "r";
                        break;
                    case 40:
                        d = "b";
                        break;
                }
            }
        }
    </script>
</head>
<body  background="10884.jpg" >
<div style="text-align: center; font-size:45px;  margin-bottom: -25px; z-index: 5;">贪吃蛇1.1版</div>
<div class="body">
    <button type="button" class="btn btn-success "  id="addspeed">加快速度</button>
    <button type="button" class="btn btn-info"  id="btn">开始游戏</button>
    <span class="score">total:<strong id="score">0</strong></span>
    <br/>    <br/>
    <div id="main">

    </div>
</div>
</body>
</html>